<template>
  <div class="common-layout">
    <el-container class="chat-box wh-100-percent">
      <el-aside width="260px" class="right-line flex-direction-col">
        <el-row
          class="bottom-line pd-10"
          align="middle"
          justify="space-between"
          style="background-color: rgba(0, 0, 0, 0.07)"
        >
          <el-col :span="5" :offset="5">Nice!</el-col>
          <el-col :span="4">
            <el-row justify="center">
              <el-image fit="fill" :src="imageUrl" />
            </el-row>
          </el-col>
          <el-col :span="9" :offset="1">Good!</el-col>
        </el-row>
        <!-- 功能列表 -->
        <el-row
          class="bottom-line"
          align="middle"
          justify="space-between"
          style="background-color: rgba(0, 0, 0, 0.07)"
        >
          <el-col :span="6" class="finger feature-item" @click="SessionSwitch(true)">
            <el-row align="middle" justify="center" class="pd-tb-10">
              <el-badge :value="200" :max="99" class="item">
                <el-icon><Phone /></el-icon>
              </el-badge>
            </el-row>
          </el-col>

          <el-col :span="6" class="finger feature-item" @click="SessionSwitch(false)">
            <el-row align="middle" justify="center" class="pd-tb-10">
              <el-badge :value="200" :max="99" class="item">
                <el-icon><User /></el-icon>
              </el-badge>
            </el-row>
          </el-col>
          <el-col
            :span="6"
            class="finger feature-item"
            @click="ChangeFindFriendDialogVisible"
          >
            <el-row align="middle" justify="center" class="pd-tb-10">
              <el-badge :value="200" :max="99" class="item">
                <el-icon><Plus /></el-icon>
              </el-badge>
            </el-row>
          </el-col>
          <el-col
            :span="6"
            class="finger feature-item"
            @click="ChangePersonageInfoDialogVisible"
          >
            <el-row align="middle" justify="center" class="pd-tb-10">
              <span>
                <el-icon><Setting /></el-icon>
              </span>
            </el-row>
          </el-col>
        </el-row>
        <!-- 会话列表和好友列表 -->
        <div
          class="fill overflow-no-scrollbar overflow-auto"
          v-show="isShowSessionList"
        >
          <SessionItem v-for="i in 10" :key="i" />
        </div>
        <div
          class="fill overflow-no-scrollbar overflow-auto"
          v-show="!isShowSessionList"
        >
          <FriendItem v-for="i in 10" :key="i" />
        </div>
      </el-aside>
      <el-container>
        <el-header class="bottom-line flex-tblr-center">
          <span>test</span>
        </el-header>
        <el-main style="overflow-y: auto" class="pd-lr-10">
          <SenderMsg />
          <ReceiverMsg />
        </el-main>

        <el-footer height="150px" class="top-line flex-direction-col">
          <el-row>
            <el-col :span="1"> <el-button :icon="Grid" circle /></el-col>
            <el-col :span="1"> <el-button :icon="Picture" circle /></el-col>
            <el-col :span="1"> <el-button :icon="Files" circle /></el-col>
            <el-col :span="21"></el-col>
          </el-row>
          <div class="fill overflow-auto mg-top-10">
            <div
              class="wh-100-percent"
              contenteditable="true"
              style="outline: none"
            ></div>
          </div>
          <div>
            <el-button class="mg-tb-10">发送</el-button>
          </div>
        </el-footer>
      </el-container>
    </el-container>
  </div>
  <!-- 好友添加查询列表 -->
  <FindFriendDialog :FindFriendDialogData="findFriendDialogData" />

  <!-- 个人信息 -->
  <PersonageInfoDialog :PersonageInfoDialogData="personageInfoDialogData" />
</template>

<script setup lang="ts">
import {
  Grid,
  Picture,
  Files,
  Phone,
  Search,
  Plus,
  Setting,
  User,
} from "@element-plus/icons-vue";
import SessionItems from "@/components/SessionItem.vue";
import FriendItem from "@/components/FriendItem.vue";
import SenderMsg from "@/components/SenderMsg.vue";
import ReceiverMsg from "@/components/ReceiverMsg.vue";
import imageUrl from "@/assets/zhs.png";
import FindFriendDialog from "@/components/FindFriendDialog.vue";
import PersonageInfoDialog from "@/components/PersonageInfoDialog.vue";
import { ref } from "vue";
let findFriendDialogData = ref({ isVisible: false });
function ChangeFindFriendDialogVisible() {
  findFriendDialogData.value.isVisible = !findFriendDialogData.value.isVisible;
}
let personageInfoDialogData = ref({ isVisible: false });

function ChangePersonageInfoDialogVisible() {
  personageInfoDialogData.value.isVisible =
    !personageInfoDialogData.value.isVisible;
}

let isShowSessionList = ref(true);
function SessionSwitch(isShow: boolean) {
  isShowSessionList.value = isShow;
}
</script>

<style scoped>
.common-layout {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: #7fffaa;
}
.chat-box {
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 10px;
  overflow: hidden;
  background: white;
}
.feature-item:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
</style>